<template>
  <div class="yz-tabs">
    <div class="tab-container">
      <div class="tab-left arrow" @click="scrollPrev">
        <q-icon class="arrow-icon" name="iconfont icontubiao2-94"/>
      </div>
      <div class="tab-right arrow" @click="scrollNext">
        <q-icon class="arrow-icon" name="iconfont icontubiao2-95"/>
      </div>
      <div class="tabs-bar" ref="container">
        <transition-group name="slide-fade" tag="div" class="tabs-bar-group" :style="navStyle">
          <div class="flex"
               v-for="(item,index) in navList"
               ref="nav"
               @click="handleChange(index)" :key="item.name">
            <div class="flex" :class="tabCls(item)">
              <span style="margin-right: 12px">
                {{item.label}}
              </span>
              <q-btn @click.stop="closeTab(item)" dense flat size="7px"
                     icon="iconfont icontubiao-67" v-show="navList.length > 0"/>
            </div>
            <q-btn @click.stop="addTab" dense flat size="10px" class="icon-add"
                   icon="iconfont icontubiao-39" v-if="(showAdd && navList.length - 1 ===index)||navList.length === 0"/>
          </div>
        </transition-group>
        <div class="tabs-bar" v-if="!navList || navList.length === 0">
          <q-btn @click.stop="addTab" dense flat size="10px" class="icon-add"
                 icon="iconfont icontubiao-39"/>
        </div>
      </div>

    </div>
    <div class="tabs-content">
      <!--slot放置pane组件内容-->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    value: {
      type: [String, Number],
      require: true
    },
    showAdd: {
      type: Boolean,
      default: false
    },
    closeTips: {
      type: String,
      default: ''
    }
  },
  computed: {
    navStyle () {
      return {
        transform: `translateX(-${this.navOffset}px)`
      }
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
    },
    currentValue () {
      this.updateStatus()
    }
  },
  data () {
    return {
      currentValue: this.value,
      navList: [],
      navOffset: 0,
      allWidth: 0
    }
  },
  methods: {
    scrollPrev () {
      const containerSize = this.$refs.container.clientWidth
      const currentOffset = this.navOffset
      if (!currentOffset) return
      let newOffset = currentOffset > containerSize
        ? currentOffset - containerSize
        : 0
      this.navOffset = newOffset
    },
    scrollNext () {
      if (!this.allWidth) {
        let allWidth = 0
        const navs = this.$refs.nav
        navs.forEach(item => {
          const width = item.clientWidth
          if (width > 0) {
            allWidth += width
          }
        })
        this.allWidth = allWidth + 50
      }

      const navSize = this.allWidth
      const containerSize = this.$refs.container.clientWidth
      const currentOffset = this.navOffset

      if (navSize - currentOffset <= containerSize) return

      let newOffset = navSize - currentOffset > containerSize * 2
        ? currentOffset + containerSize
        : (navSize - containerSize)
      this.navOffset = newOffset
    },
    tabCls (item) {
      return [
        'tabs-tab',
        {
          'tabs-tab-active': item.name === this.currentValue
        }
      ]
    },
    getTabs () {
      // 获取pane
      return this.$children.filter(function (item) {
        return item.$options.name === 'pane'
      })
    },
    updateNav () {
      // 获取标题，name,并放置到navList数组中
      this.navList = []
      let _this = this
      this.getTabs().forEach(function (pane, index) {
        _this.navList.push({
          label: pane.label,
          name: pane.name || index

        })
        if (!pane.name) pane.name = index
        if (index === 0) {
          if (!_this.currentValue) {
            _this.currentValue = pane.name || index
          }
        }
      })
      this.updateStatus()
    },
    updateStatus () {
      let tabs = this.getTabs()
      tabs.forEach(tab => {
        tab.show = tab.name === this.currentValue
        return tab.show
      })
    },
    handleChange (index) {
      let nav = this.navList[index]
      let name = nav.name
      this.currentValue = name
      this.$emit('input', name)
      this.$emit('on-click', name)
    },
    closeTab (item) {
      if (this.closeTips) {
        this.$q.dialog({
          title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          ${this.closeTips}</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          },
          cancel: {
            unelevated: true,
            outline: true,
            label: '取消'
          }
        }).onOk(async () => {
          this.$emit('closeTab', item.name)
        })
      } else {
        this.$emit('closeTab', item.name)
      }
    },
    closeConfirm (name) {
      this.allWidth = 0
      const currentIndex = this.navList.findIndex(list => list.name === name)
      if (currentIndex > -1) {
        let nav
        nav = this.navList[currentIndex - 1]
        if (!nav) {
          nav = this.navList[currentIndex + 1]
        }
        const navFirst = this.navList.length > 0 ? this.navList[0] : null
        // 如果nav存在就用nav的name,否则就判断是否有第一个,如果都没有就都没了
        this.currentValue = nav ? nav.name : navFirst ? navFirst.name : null
        this.navList.splice(currentIndex, 1)
      }
    },
    addTab () {
      this.allWidth = 0
      this.$emit('addTab')
    }
  }
}
</script>

<style lang="stylus">
  [v-cloak] {
    display: none;
  }

  .slide-fade-enter-active
    transition all .2s ease

  .slide-fade-leave-active
    transition all .3s ease-out
  .slide-fade-enter, .slide-fade-leave-to
    transform translateX(-20px)
    opacity 0

  .yz-tabs
    font-size 14px
    color #333333

    .tab-container
      padding 0 25px
      position relative
      overflow hidden

    .tabs-bar
      background #DFE4FF
      overflow hidden
      display flex
      min-height 32px

    .arrow
      display flex
      justify-content center
      align-items center
      width 24px
      height 32px
      cursor pointer
      box-shadow 0 0 8px 0 rgba(0, 0, 0, 0.2)
      background #ffffff

    .tab-left
      position absolute
      left 0
      bottom 0

    .tab-right
      position absolute
      right 0
      bottom 0

    .tabs-tab
      position relative
      padding 5.5px 16px
      cursor pointer
      transition transform .3s
    .tabs-tab-active
      background #ffffff
      border-radius 6px 6px 0 0

    .tabs-bar-group
      display flex
      flex-wrap nowrap
      flex-shrink 0
      transition transform .3s

    .icon-add
      color $primary
      margin-left 10px

</style>
